<template>
  <div>
    <nav-header :headerTitle="show.headerTitle" :headerNext="''" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="p-section">
        <div id="myFiter"></div>
        <div class="pc-itemsInput">
          <span>添加商品名称</span>
          <img class="imgSpanSix" src="@/assets/images/xinhao.png" alt />
          <input type="text" placeholder="商品名称5-20个字" v-model="show.productName" maxlength="20" />
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsTextarea">
          <span>详细描述</span>
          <img src="@/assets/images/xinhao.png" alt />
          <textarea
            name="shop"
            cols="30"
            rows="10"
            placeholder="讲出你商品的亮点（30-1000字）"
            v-model="show.productDetail"
            maxlength="1000"
            @blur="animateWidth('blur')"
            @focus="animateWidth('focus')"
          ></textarea>
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsUploadImg">
          <div class="divOne">商品图片</div>
          <img class="imgOne" src="@/assets/images/xinhao.png" alt />
          <div class="divTwo">前三张为必选封面</div>
          <div class="divThree">
            <div class="items" v-for="(items,index) in show.productImgArr" :key="index">
              <div class="items-content">
                <img
                  class="imgDel"
                  src="@/assets/images/release_pic_delete@2x.png"
                  alt
                  v-on:click="delImg(index)"
                />
                <img class="imgUrl" :src="items" alt />
              </div>
            </div>
            <div class="items" @click="upImg('productImgArr')">
              <div class="items-content">
                <img class="imgUrl" src="@/assets/images/goods_add.png" alt />
              </div>
            </div>
          </div>
          <div class="clear"></div>
          <div class="null39"></div>
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsLR">
          <span class="spanOne">商品类型</span>
          <img class="imgTwo" src="@/assets/images/xinhao.png" alt />
          <span class="spanTwo">请选择商品的类型</span>
          <div v-on:click="productType">
            <span class="spanThree" v-on:click="productType">{{show.productType}}</span>
            <img class="imgOne" v-on:click="productType" src="@/assets/images/goods_down.png" alt />
          </div>
          <div class="px-line"></div>
        </div>
        <div class="pc-xieyi">发布代表同意《用户使用服务协议》《用户信息审核规定》以及《用户隐私权条款》</div>
      </div>
      <div class="p-footer">
        <div class="btn" v-show="!show.isEdit" @click="save">发布商品秀</div>
        <div class="btn" v-show="show.isEdit" @click="save">保存商品信息</div>
      </div>
    </section>
    <ModalBottom :ModalBottom.sync="ModalBottom" @ModalBottomClick="ModalBottomClick"></ModalBottom>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
import ModalBottom from "@/components/ModalBottom";
export default {
  name: "EditProduct",
  mixins: [mixin],
  components: {
    navHeader,
    ModalBottom
  },
  data() {
    return {
      show: {
        isEdit: false,
        headerTitle: "",
        productType: "请选择",
        productTypeId: "",
        productName: "",
        productDetail: "",
        // productImgArr: [],
        // productImgStr: "",
        productImgArr: [
          "https://magicvoicetrans.oss-cn-shenzhen.aliyuncs.com/useinstruct/aos/3/noSuspensionWindow/1.png",
          "https://magicvoicetrans.oss-cn-shenzhen.aliyuncs.com/useinstruct/aos/3/noSuspensionWindow/2.png",
          "https://magicvoicetrans.oss-cn-shenzhen.aliyuncs.com/useinstruct/aos/3/noSuspensionWindow/3.png"
        ],
        productImgStr:
          "https://magicvoicetrans.oss-cn-shenzhen.aliyuncs.com/useinstruct/aos/3/noSuspensionWindow/1.png@https://magicvoicetrans.oss-cn-shenzhen.aliyuncs.com/useinstruct/aos/3/noSuspensionWindow/2.png@https://magicvoicetrans.oss-cn-shenzhen.aliyuncs.com/useinstruct/aos/3/noSuspensionWindow/3.png"
      },
      ModalBottom: {
        isModal: false,
        key: "",
        data: ""
      }
    };
  },
  created() {
    if (this.$route.query.productId) {
      this.show.isEdit = true;
    } else {
      this.show.isEdit = false;
    }
    //获取产品类型
    this.params = {};
    this.$http.post("product/getProductCategoryInfo", this.params).then(
      res => {
        console.log(res);
        res = res.data.productCategoryInfo;
        this.ModalBottom.data = res;
        this.ModalBottom.key = "productCategoryName";
      },
      err => {
        console.log(err);
      }
    );
  },
  mounted() {
    this.init();
    this.isKeyBord();
  },
  methods: {
    init() {
      if (this.show.isEdit) {
        this.params = {
          productId: this.$route.query.productId
        };
        this.$http.post("product/getProductInfo", this.params).then(
          res => {
            console.log(res);
            res = res.data.productInfo;
            this.show.productName = res.productName;
            this.show.productDetail = res.productBriefIntro;
            this.show.productTypeId = res.productCategoryId;
            this.show.productType = res.productCategoryName;
            this.show.productImgArr = res.productImgUrls;
          },
          err => {
            console.log(err);
          }
        );
        this.show.headerTitle = "修改商品";
      } else {
        this.show.headerTitle = "发布新商品";
      }
    },
    productType: function() {
      this.ModalBottom.isModal = true;
    },
    ModalBottomClick(obj) {
      //console.log(obj);
      this.show.productType = obj.productCategoryName;
      this.show.productTypeId = obj.id;
    },
    save: function() {
      if (this.show.productName.length < 5) {
        Toast({
          forbidClick: true,
          message: "请填写商品标题5-20个字!"
        });
        return false;
      }
      if (this.show.productDetail.length < 30) {
        Toast({
          forbidClick: true,
          message: "请填写商品详细描述（30-1000字）!"
        });
        return false;
      }
      if (this.show.productImgArr.length < 3) {
        Toast({
          forbidClick: true,
          message: "请选择三张商品图片!"
        });
        return false;
      }
      if (this.show.productType == "请选择") {
        Toast({
          forbidClick: true,
          message: "请选择商品类型!"
        });
        return false;
      }
      this.strImg();
      this.params = {
        productName: this.show.productName,
        productBriefIntro: this.show.productDetail,
        productCategoryId: this.show.productTypeId,
        productImgUrls: this.show.productImgStr
      };
      let url = "";
      if (this.show.isEdit) {
        this.params.productId = this.$route.query.productId;
        url = "product/reviseProductInfo";
      } else {
        this.params.uniqueId = window.localStorage.uniqueId;
        this.params.shopId = this.$route.query.shopId;
        url = "product/createProductInfo";
      }
      this.$http.post(url, this.params).then(
        res => {
          console.log(res);
          Toast.success({
            forbidClick: true,
            message: "保存成功",
            onClose: () => {
              this.$router.go(-1); //返回上一层
            }
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    upImg(type) {
      //alert(type);
      let parmas = {
        maxCount: 1, //选择相册的最大数，若是相机拍照则只能为1
        sourceType: ["album", "camera"], //相册&&拍照，可选其一
        method: "productImg"
      };
      this.$bridge.callHandler("chooseImages", parmas, res => {
        let imagesArr = res.split(",");
        if (type == "productImgArr") {
          this.show.productImgArr.push(imagesArr[0]);
        }
      });
    },
    delImg(index) {
      this.show.productImgArr.splice(index, 1);
      this.strImg();
    },
    strImg() {
       this.show.productImgStr=this.show.productImgArr.join(",");
    },
    //判断是否失去焦点
    animateWidth(type) {
      if (type == "blur") {
        //失去焦点
        this.isScroll(true);
      } else {
        this.isScroll(false);
      }
    },
    isKeyBord() {
      let that = this;
      window.onresize = function() {
        let scrollDiff = that.getClientHeight();
        //alert(scrollDiff);
        if (scrollDiff < window.screen.height / 2) {
          that.isScroll(false);
        } else {
          that.isScroll(true);
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.null32 {
  width: 100%;
  height: 32px;
}
.null39 {
  width: 100%;
  height: 39px;
}
.null78 {
  width: 100%;
  height: 78px;
}

.page {
  margin-top: 86px;
  .p-section {
    .px-line {
      height: 1px;
      background: rgba(237, 237, 237, 1);
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 0px;
    }

    .pc-itemsInput {
      width: 100%;
      height: 202px;
      background: #fff;
      position: relative;
      .imgSpanSix {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 248px;
        top: 49px;
      }
      span {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 32px;
        top: 32px;
      }
      input {
        border: none;
        outline: none;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        width: 686px;
        position: absolute;
        left: 32px;
        top: 104px;
      }
      input::-webkit-input-placeholder {
        color: rgba(129, 129, 129, 1);
      }
    }
    .pc-itemsTextarea {
      width: 100%;
      height: 300px;
      background: #fff;
      position: relative;
      img {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 180px;
        top: 49px;
      }
      span {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 32px;
        top: 32px;
      }
      textarea {
        border: none;
        outline: none;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        width: 686px;
        height: 150px;
        position: absolute;
        left: 32px;
        top: 104px;
      }
      textarea::-webkit-input-placeholder {
        color: rgba(129, 129, 129, 1);
      }
    }
    .pc-itemsUploadImg {
      padding-left: 32px;
      padding-right: 32px;
      text-align: left;
      position: relative;
      .divOne {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        width: 100%;
        margin-top: 32px;
        font-weight: bold;
      }
      .imgOne {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 180px;
        top: 20px;
      }
      .divTwo {
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        width: 100%;
        margin-top: 24px;
      }
      .divThree {
        margin-top: 48px;
        .items {
          float: left;
          width: 33%;
          .items-content {
            margin: 5px;
            position: relative;
            .imgUrl {
              width: 100%;
              height: 222px;
            }
            .imgDel {
              width: 44px;
              height: 44px;
              position: absolute;
              left: 0px;
              top: 0px;
            }
          }
        }
      }
    }
    .pc-itemsLR {
      width: 100%;
      height: 178px;
      background: #fff;
      position: relative;
      .imgOne {
        width: 32px;
        height: 32px;
        position: absolute;
        right: 32px;
        top: 74px;
      }
      .imgTwo {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 180px;
        top: 50px;
      }
      .spanOne {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 32px;
        top: 33px;
      }
      .spanTwo {
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        position: absolute;
        left: 32px;
        top: 104px;
      }
      .spanThree {
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        right: 84px;
        top: 69px;
      }
    }
    .pc-xieyi {
      margin-top: 32px;
      font-size: 26px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 37, 37, 1);
      padding-left: 32px;
      padding-right: 32px;
      height: 84px;
      line-height: 42px;
    }
  }
  .p-footer {
    width: 100%;
    margin-top: 64px;
    margin-bottom: 16px;
    .btn {
      font-size: 34px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      width: 562px;
      height: 88px;
      line-height: 88px;
      margin: auto;
      text-align: center;
      background: rgba(255, 37, 37, 1);
      border-radius: 44px;
    }
  }
}
</style>
